<template>
  <transition name="el-zoom-in-center">
    <div class="JADP-preview-main">
      <div class="JADP-common-page-header">
        <el-page-header
          @back="goBack"
          :content="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"
        />
        <div class="options">
          <el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail"
            >确 定</el-button
          >
          <el-button @click="goBack">取 消</el-button>
        </div>
      </div>
      <el-row
        :gutter="15"
        class="main"
        :style="{ margin: '0 auto', width: '100%' }"
      >
        <el-form
          ref="elForm"
          :model="dataForm"
          :rules="rules"
          size="small"
          label-width="150px"
          label-position="right"
          :disabled="!!isDetail"
        >
          <el-col :span="12">
            <el-form-item label="课件名称" prop="name">
              <el-input
                v-model="dataForm.name"
                placeholder="请输入"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <!-- <el-form-item label="分类" prop="type">
              <el-select
                v-model="dataForm.type"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
                :multiple="false"
              >
                <el-option
                  v-for="(item, index) in getDict('kjfl')"
                  :key="index"
                  :label="item.dataName"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item> -->

            <el-form-item label="分类" prop="type">
              <JADP-TreeSelect
                v-model="dataForm.type"
                :options="treeData"
                placeholder="选择分类"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>

          <!-- <el-col :span="12">
            <el-form-item label="标题" prop="title">
              <el-input
                v-model="dataForm.title"
                placeholder="请输入"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col> -->

          <el-col :span="12">
            <el-form-item label="主讲老师" prop="teacher">
              <!-- v-model="teacher" -->
              <el-input
                v-model="dataForm.teachername"
                placeholder="请输入"
                readonly
                @click.native="teacherClick"
                :style="{ width: '100%' }"
                class="teacher"
              >
                <template slot="append">
                  <el-button type="primary" @click="teacherClick"
                    >选择讲师</el-button
                  ></template
                >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="课件学时" prop="coursewaretime">
              <!-- <el-input v-model="dataForm.coursewaretime"></el-input> -->
              <el-input-number
                v-model="dataForm.coursewaretime"
                :step="1"
                :min="1"
                step-strictly
              ></el-input-number>
            </el-form-item>
            <el-form-item label="实施层级" prop="level" label-width="120px">
              <el-select
                v-model="dataForm.level"
                placeholder="请选择"
                :style="{ width: '100%' }"
              >
                <el-option label="公司级" value="0"></el-option>
                <el-option label="车间级" value="1"></el-option>
                <el-option label="班组级" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- <el-col :span="12">
            <el-form-item label="课件评价管理" prop="pjmanagecid">
              <el-input
                v-model="dataForm.pjmanagecname"
                placeholder="请选择"
                readonly
                @click.native="
                  acquisitionEvaluation('41dce5f0b6794ff4a73552e92d750d13')
                "
                :style="{ width: '100%' }"
              >
                <template slot="append">
                  <el-button
                    type="primary"
                    @click="
                      acquisitionEvaluation('41dce5f0b6794ff4a73552e92d750d13')
                    "
                    >选择课件评价</el-button
                  ></template
                >
              </el-input>
            </el-form-item>
          </el-col> -->

          <!-- <el-col :span="12">
            <el-form-item label="讲师评价管理" prop="pjmanagetid">
              <el-input
                v-model="dataForm.pjmanagetname"
                placeholder="请选择"
                readonly
                @click.native="
                  acquisitionEvaluation('37ede04af69d425b8dd97024e08c4ca3')
                "
                :style="{ width: '100%' }"
              >
                <template slot="append">
                  <el-button
                    type="primary"
                    @click="
                      acquisitionEvaluation('37ede04af69d425b8dd97024e08c4ca3')
                    "
                    >选择讲师评价</el-button
                  ></template
                >
              </el-input>
            </el-form-item>
          </el-col> -->

          <el-col :span="8">
            <el-form-item label="学习时长" prop="fen">
              <div class="myTime">
                <el-input
                  v-model="dataForm.fen"
                  placeholder="上传后生成"
                  type="number"
                  readonly
                  :style="{ width: '100%' }"
                >
                </el-input>
                <p style="padding: 0 5px">分</p>

                <el-input
                  v-model="dataForm.miao"
                  placeholder="上传后生成"
                  type="number"
                  readonly
                  :style="{ width: '100%' }"
                >
                </el-input>
                <p style="padding: 0 5px">秒</p>
              </div>
            </el-form-item>
          </el-col>

          <!-- <el-col :span="6">
            <el-form-item prop="miao">
              <el-input
                v-model="dataForm.miao"
                placeholder="请输入"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="24">
            <el-form-item label="简介" prop="info">
              <el-input
                v-model="dataForm.info"
                placeholder="请输入"
                :style="{ width: '100%' }"
                true
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4 }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="课件类型" prop="coursetype">
              <el-radio-group v-model="dataForm.coursetype" size="small">
                <el-radio
                  v-for="(item, index) in getDict('KeJianType').reverse()"
                  :key="index"
                  :label="item.id"
                  :disabled="item.disabled"
                >
                  {{ item.dataName }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <!-- <el-col :span="24">
            <el-form-item
              label="允许学员下载"
              prop="isdown"
              v-if="
                dataForm.coursetype !== 'f6000986fdbe4ce3b34f448fd0230670' &&
                  dataForm.coursetype !== '8a487a64465e415a88b90a00eabe30f3'
              "
            >
              <el-switch v-model="dataForm.isdown" active-value="true">
              </el-switch>
            </el-form-item>
          </el-col> -->

          <el-col :span="24">
            <el-form-item
              v-if="dataForm.coursetype === 'f6000986fdbe4ce3b34f448fd0230670'"
              label="课程描述"
              prop="coursedes"
            >
              <JADP-Quill
                v-model="dataForm.coursedes"
                placeholder="请输入内容..."
              >
              </JADP-Quill>
            </el-form-item>

            <el-form-item
              v-if="dataForm.coursetype === 'b0c150d527c64d69a6010ad1f4e35959'"
              label="音频"
              prop="audio"
            >
              <JADP-UploadAudio
                v-model="dataForm.audio"
                :showTip="true"
                :fileSize="10"
                sizeUnit="GB"
                accept=".mp3"
                buttonText="点击上传"
                :audio="true"
              >
              </JADP-UploadAudio>
            </el-form-item>

            <el-form-item
              v-if="dataForm.coursetype === 'b083b43273434d239d520566fb7661e4'"
              label="文档"
              prop="document"
            >
              <JADP-UploadFz
                v-model="dataForm.document"
                :showTip="true"
                :fileSize="500"
                sizeUnit="MB"
                :limit="9"
                accept=".xls, .xlsx, .docx, .zip, .pdf "
                buttonText="点击上传"
              >
              </JADP-UploadFz>
            </el-form-item>

            <el-form-item
              label="外部链接"
              v-if="dataForm.coursetype === '8a487a64465e415a88b90a00eabe30f3'"
              prop="link"
            >
              <el-input
                type="textarea"
                :rows="3"
                v-model="dataForm.link"
                placeholder="请输入外部链接"
              ></el-input>
            </el-form-item>

            <el-form-item
              v-if="dataForm.coursetype === '5b9fef3609c74d938cacd08719dc7757'"
              label="图片"
              prop="image"
            >
              <JADP-UploadImg
                v-model="dataForm.image"
                :showTip="true"
                :fileSize="500"
                sizeUnit="MB"
                :limit="9"
                buttonText="选择照片"
              >
              </JADP-UploadImg>
            </el-form-item>

            <el-form-item
              v-if="dataForm.coursetype === '49756e783c2e445e90d9a7bbf61c36f3'"
              label="视频"
              prop="video"
            >
              <JADP-UploadVideo
                v-model="dataForm.video"
                :showTip="true"
                :fileSize="10"
                sizeUnit="GB"
                accept=".mp4"
                buttonText="点击上传"
                @duration="duration"
              >
              </JADP-UploadVideo>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="课件文档" prop="documents">
              <JADP-UploadFz
                v-model="dataForm.documents"
                :fileSize="500"
                sizeUnit="MB"
                :limit="9"
                accept=".xls, .xlsx, .docx, .zip, .pdf, .ipa, .plist "
                buttonText="点击上传"
              >
              </JADP-UploadFz>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <TeacherList ref="teacherList" @determine="determineTeacherList" />
      <!-- <EvaluationTable
        v-if="evaluationVisible"
        ref="EvaluationTable"
        @determine="determineCoursewareTable"
      /> -->
    </div>
  </transition>
</template>
<script>
import request from "@/utils/request";
import ExportBox from "./ExportBox";
import TeacherList from "./teachertable.vue";
// import EvaluationTable from "./evaluationTable.vue";
export default {
  name: "aaa",
  props: {
    premium: {
      type: Boolean,
      default: false,
    },
  },
  components: { ExportBox, TeacherList },
  data() {
    return {
      loading: false,
      visible: false,
      isDetail: false,
      treeData: [],
      activeName: "",
      evaluationVisible: false,
      dataForm: {
        type: "",
        title: undefined,
        name: undefined,
        teacher: undefined,
        fen: undefined,
        pjmanagecname: undefined,
        pjmanagetname: undefined,
        miao: 0,
        coursetype: "49756e783c2e445e90d9a7bbf61c36f3",
        isdown: 0,
        info: undefined,
        coursedes: "",
        video: null,
        audio: null,
        coursewaretime: undefined,
        document: [],
        documents: [],
        link: "",
        image: [],
        creatoruserid: "",
        creatortime: "",
        lastmodifyuserid: "",
        lastmodifytime: "",
        level: "",
        premium: false,
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            message: "请选择",
            trigger: "blur",
          },
        ],
        teacher: [
          {
            required: true,
            message: "请选择教师",
            trigger: "change",
          },
        ],
        video: [
          {
            required: true,
            message: "请上传视频",
            trigger: "change",
          },
        ],
        coursewaretime: [
          {
            required: true,
            message: "请输入学时",
            trigger: "blur",
          },
        ],
        level: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
        // documents: [
        //   {
        //     required: true,
        //     message: "请上传文档",
        //     trigger: "change"
        //   }
        // ]
        // fen: [
        //   {
        //     required: true,
        //     message: "请输入",
        //     trigger: "blur"
        //   }
        // ]
        // miao: [
        //   {
        //     required: true,
        //     message: "请输入",
        //     trigger: "blur",
        //   },
        // ],
      },
      textarea: [],
      teacher: "",
      teacherList: [],
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getteacherList();
    this.getTreeData();
  },
  mounted() {},
  methods: {
    getTreeData() {
      this.request({
        url: `/api/coursewaretype/Xy_ks_courseware_type/getTreeList?organizeId=${this.$store.getters.organizeId}`,
        method: "get",
      }).then((res) => {
        let topItem = {
          fullName: "默认",
          hasChildren: true,
          id: "-1",
          icon: "icon-ym icon-ym-tree-organization3",
          children: res.data,
        };
        this.treeData = [topItem];
      });
    },
    goBack() {
      this.$emit("refresh");
    },
    //获取视频时长
    duration(timer) {
      let fen = timer / 60;
      this.dataForm.fen = Math.floor(fen);
      this.dataForm.miao = timer % 60;
    },
    init(id, isDetail) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.isDetail = isDetail || false;
      this.$nextTick(() => {
        this.$refs["elForm"].resetFields();
        if (this.dataForm.id) {
          this.loading = true;
          request({
            url: `/api/courseware/Xy_ks_courseware/${this.dataForm.id}?organizeId=${this.$store.getters.organizeId}`,
            method: "get",
          }).then((res) => {
            this.dataForm = res.data;
            console.log(this.dataForm, 456);

            // this.teacher = this.teacherList.filter(
            //   item => item.id === this.dataForm.teacher
            // )[0].realname;
            // this.teacher = this.teacher ? this.teacher[0].realname : "";

            this.loading = false;
          });
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          this.dataForm.organizeId = this.$store.getters.organizeId;
          if (this.dataForm.coursetype === "f6000986fdbe4ce3b34f448fd0230670") {
            this.dataForm.audio = "";
            this.dataForm.document = "";
            this.dataForm.link = "";
            this.dataForm.image = "";
            this.dataForm.video = "";
          }
          if (this.dataForm.coursetype === "b0c150d527c64d69a6010ad1f4e35959") {
            this.dataForm.coursedes = "";
            this.dataForm.document = "";
            this.dataForm.link = "";
            this.dataForm.image = "";
            this.dataForm.video = "";
          }
          if (this.dataForm.coursetype === "b083b43273434d239d520566fb7661e4") {
            this.dataForm.coursedes = "";
            this.dataForm.audio = "";
            this.dataForm.link = "";
            this.dataForm.image = "";
            this.dataForm.video = "";
          }
          if (this.dataForm.coursetype === "8a487a64465e415a88b90a00eabe30f3") {
            this.dataForm.coursedes = "";
            this.dataForm.audio = "";
            this.dataForm.document = "";
            this.dataForm.image = "";
            this.dataForm.video = "";
          }
          if (this.dataForm.coursetype === "5b9fef3609c74d938cacd08719dc7757") {
            this.dataForm.coursedes = "";
            this.dataForm.audio = "";
            this.dataForm.document = "";
            this.dataForm.link = "";
            this.dataForm.video = "";
          }
          if (this.dataForm.coursetype === "49756e783c2e445e90d9a7bbf61c36f3") {
            this.dataForm.coursedes = "";
            this.dataForm.audio = "";
            this.dataForm.document = "";
            this.dataForm.link = "";
            this.dataForm.image = "";
          }
          if (!this.dataForm.id) {
            this.dataForm.premium = this.premium;
            request({
              url: `/api/courseware/Xy_ks_courseware`,
              method: "post",
              data: this.dataForm,
            }).then((res) => {
              this.$message({
                message: res.msg,
                type: "success",
                duration: 1000,
                onClose: () => {
                  (this.visible = false), this.$emit("refresh", true);
                },
              });
            });
          } else {
            request({
              url: "/api/courseware/Xy_ks_courseware/" + this.dataForm.id,
              method: "PUT",
              data: this.dataForm,
            }).then((res) => {
              this.$message({
                message: res.msg,
                type: "success",
                duration: 1000,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refresh", true);
                },
              });
            });
          }
        }
      });
    },
    //教师table
    teacherClick() {
      console.log("教师");
      this.$refs.teacherList.teacherVisible = true;
    },
    determineTeacherList(val) {
      // this.teacher = val.realname;
      this.dataForm.teachername = val.realname;
      this.dataForm.teacher = val.id;
    },
    //获取讲师list
    getteacherList() {
      request({
        url: `/api/teachersManage/Xy_ks_teachers/getAllList?organizeId=${this.$store.getters.organizeId}`,
        method: "post",
      }).then((res) => {
        this.teacherList = res.data;
      });
    },
    //获取评价
    acquisitionEvaluation(id) {
      this.evaluationVisible = true;
      this.$nextTick(() => {
        this.$refs.EvaluationTable.initData(id);
      });
    },
    determineCoursewareTable(val, dict) {
      console.log(val, dict);
      if (dict == "课件") {
        this.dataForm.pjmanagecname = val.managename;
        this.dataForm.pjmanagecid = val.id;
      } else if (dict == "讲师") {
        this.dataForm.pjmanagetname = val.managename;
        this.dataForm.pjmanagetid = val.id;
      }
    },
  },
};
</script>
<style scoped lang="scss">
.myTime {
  display: flex;
  >>> .el-input__inner {
    padding-right: 0;
  }
}
.teacher {
  ::v-deep .el-input__inner {
    cursor: pointer;
  }
}
</style>
